import React from "react";
import "./style.css";
let list = [];
for (let i = 0; i < 10000; i++) {
  list.push(i);
}

const NoPure = (props) => {
  return (
    <div className="pure__item">
      {list.map((num) => {
        return <div key={num}>{num}</div>;
      })}
    </div>
  );
};
function areEqual(prevProps, nextProps) {
  /*
    return true if passing nextProps to render would return
    the same result as passing prevProps to render,
    otherwise return false
    */
  return true;
}

const Pure = React.memo(() => {
  return (
    <div className="pure__item">
      {list.map((num) => {
        return <div key={num}>{num}</div>;
      })}
    </div>
  );
}, areEqual);
export { NoPure, Pure };
